<template>
	<view class="dflex use-area" :style="{ 'padding': padding, 'color': color, 'backgroundColor': bgColor, 'fontWeight': fwt }" @click="toDetail">
		<view class="dflex-c padding-right-xs">
			<view class="iconfont icongonggao4 fs-xxl line-height-1"></view>
		</view>
		
		<view class="notice-bar w-full">
			<view class="notice-bar-content" :style="{ 'animationDuration': `${time}s` }">
				{{ text }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "use-notice-bar",
		props: {
			text: {
				type: String,
				default: '通知栏消息'
			},
			color: {
				type: String,
				default: '#333'
			},
			fwt: {
				type: String,
				default: 'bold'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			padding: {
				type: String,
				default: '20rpx 30rpx 20rpx 20rpx'
			},
			time: {
				type: [Number, String],
				default: 8
			}
		},
		data() {
			return {

			};
		},
		methods: {
			toDetail() {
				this.$emit('click');
			}
		}
	}
</script>

<style>
	.notice-bar {
		white-space: nowrap;
		overflow: hidden;
		position: relative;
	}

	.notice-bar-content {
		display: inline-block;
		padding-left: 100%;
		animation: uNoticeBarAni 8s linear infinite;
	}

	@keyframes uNoticeBarAni {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
		}
	}
</style>